/** @jsxImportSource @emotion/react */
import * as React from "react";
import {CCell, RCell, Table, TableBody, TableRow, Text,} from "customize-easy-ui-component";

//安装单位: 不是台账旧的；
export const 首页设备概况Comple= ({theme, orc, rep } :{theme: any, orc:any, rep:any}
) => {
  return <Table fixed={ ["20%","%"] }  css={ {borderCollapse: 'collapse'} }>
    <TableBody rheight={40}>
      <TableRow>
        <RCell css={{border:'none'}}>使用单位：</RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc.使用单位 || '／'}</CCell>
      </TableRow>
      <TableRow >
        <RCell css={{border:'none'}}>安装单位：</RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc?.安装单 || '／'}</CCell>
      </TableRow>
      <TableRow>
        <RCell css={{border:'none'}}>容器名称：</RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc.设备名称 || '／'}</CCell>
      </TableRow>
      <TableRow >
        <RCell css={{border:'none'}}>产品编号：</RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc.出厂编号 || '／'}</CCell>
      </TableRow>
      <TableRow>
        <RCell css={{border:'none'}}>检验日期：</RCell>
        {orc.检验日期1? <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc.检验日期1} 至 {orc.检验日期}</CCell>
            :
            <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc.检验日期}</CCell>
        }
      </TableRow>
      <TableRow>
        <RCell css={{border:'none'}}>监察识别码：</RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc.监察识别码 || '／'}</CCell>
      </TableRow>
    </TableBody>
  </Table>;
};


/*适配 useThreeColumnView版本的
* */
//必须自带Cell
export const view容积=(orc:any)=>{
  return <CCell>{orc?.是换热? '换热面积':'容积'}</CCell>
};
//view:不能自带Cell
export const render容积换热={
  view:(orc:any)=>{
    const has=!!(orc?.是换热);
    return <>
      <div css={{ display: 'flex',justifyContent: 'space-around',alignItems: 'center'}}>
        <Text>{orc?.容积换热}</Text>
        <Text>{has? 'm²' : 'm³'}</Text>
      </div>
    </>
  },
};
